<template>
    <div>
        <div class="flex items-center justify-between px-4">
            <div class="text-base font-bold">详情</div>
        </div>
        <div class="relative" ref="contentRef">
            <div v-html="content" class="mt-4" :class="isExpand ? '' : 'h-96 overflow-hidden'"></div>
            <div v-show="!isExpand"
                class="h-32 bg-gradient-to-t from-white absolute bottom-0 left-0 right-0 grid place-content-center">
                <div class="bg-white text-xs text-gray-700 px-2 py-1 rounded-full flex items-center space-x-1"
                    @click="isExpand = true">
                    <span>展开全部</span>
                    <IMingcute:down-fill />
                </div>
            </div>
        </div>
        <div v-show="isExpand && showExpandBtn" 
            class="absolute z-30 right-8 bottom-1/4 text-xs px-2 py-1 rounded-md bg-white flex items-center space-x-1 border"
            @click="isExpand = false">
            <div>收起<br>详情</div>
            <IMingcute:up-fill />
        </div>
    </div>
</template>
    
<script setup lang='ts'>
const contentRef = ref<HTMLElement>();
const content = '<img src="https://img30.360buyimg.com/sku/jfs/t1/130818/23/33029/100819/646cd461F5120ad7d/7ab13b531cb4a0e5.jpg"/>';
const isExpand = ref(false)
const showExpandBtn = ref(true);
onMounted(() => {
    const el = unref(contentRef) as HTMLElement;
    const observe = new IntersectionObserver(([{ isIntersecting }]) => {
        showExpandBtn.value = isIntersecting
    }, {
        threshold: 0
    })
    observe.observe(el)
})
</script>
    
<style></style>